<template>
  <div class="base-footer">
    <div class="base-footer__warp">
      <div class="base-footer__nav flex">
        <div class="base-footer__nav-left flex">
          <div>
            <h5>网站导航</h5>
            <ul>
              <li v-for="nav in navs" :key="nav.id">
                <router-link :to="nav.link"  @click="top">{{nav.name}}</router-link>
              </li>
            </ul>
          </div>
          <div>
            <h5>帮助中心 </h5>
            <ul>

              <li>
                <router-link @click="top" to="/help">常见问题</router-link>
              </li>
              <li>
                <router-link @click="top"  to="/help">业务文档</router-link>
              </li>
              <li>
                <router-link @click="top"  to="/help">建筑标准</router-link>
              </li>
              <li>
                <router-link @click="top" to="/help">下载中心</router-link>
              </li>
            </ul>
          </div>
          <div>
            <h5>联系我们</h5>
            <ul class="mt70">
              <li>技术咨询电话：400-032-9066</li>
            </ul>


            <h5>网站访问次数</h5>
            <ul class="count">
              <li v-for="(item,index) in count" :key="index">{{item}}</li>
            </ul>
          </div>
        </div>
        <div class="base-footer__nav-right">
          <h5>更多服务</h5>
          <ul class="flex">
            <li v-for="tool in tools" :key="tool.id">
              <img width="125" :src="tool.img" alt="">
              <p>{{tool.name}}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="base-footer__link flex">
        <h5>网站链接</h5>
        <ul class="flex">
          <li v-for="link in links" :key="link.link">
            <a target="_blank" :href="link.link">{{link.name}}</a>
          </li>
        </ul>
      </div>
      <div class="base-footer__copyright flex">
        <p>
          <span>主办：新疆维吾尔自治区住房和城乡建设厅</span>
          <span>技术支持： 安徽德拓信息科技有限公司   400-032-9066</span>
          <span>客服问题投诉： kfwtts@ditop.top</span>
          <span>备案序号：<a href="https://beian.miit.gov.cn/" target="_blank">新ICP备14002141号-8</a></span>
        </p>
      </div>
    </div>
    <Affix />
    <verify />
  </div>
</template>

<script lang="ts" >
import {defineComponent, onMounted, ref} from 'vue';
import type { linkItem } from './types';
import Affix from './affix.vue';
import verify from './verify.vue';
import { sitePvApi} from "/@/api/home";
import { top } from "/@/utils";
export default defineComponent({
  components:{ Affix , verify  },
  setup() {

    const navs = ref<linkItem[]>([
      { id: 0, name: '首页', link:'/' },
      { id: 1, name: '信息公开', link:'/public' },
      { id: 2, name: '数据服务', link:'/service' },
      { id: 3, name: '主题服务', link:'/theme' },
      { id: 4, name: '帮助中心', link:'/help' }
    ]);
    const tools = ref<linkItem[]>([
      { id: 0, img: '/resource/image/xcx-code.jpg', name:'个人服务平台微信小程序' },
      { id: 0, img: '/resource/image/zljg.jpg', name:'质量安全监管微信小程序' }
    ]);
    const links = ref<linkItem[]>([
      { id: 0, name: '住房和城乡建设部门', link:'http://www.mohurd.gov.cn' },
      { id: 1, name: '全国建筑市场监管公共服务平台', link:'http://jzsc.mohurd.gov.cn/home' },
      { id: 2, name: '新疆政务服务网', link:'https://zwfw.xinjiang.gov.cn/' },
      { id: 3, name: '新疆维吾尔自治区住房和城乡建设厅', link:'http://zjt.xinjiang.gov.cn/' }
    ]);

    const sitePvApiMethod = async () => {
      let res = await sitePvApi();
      count.value = res.toString().split('');
    };

    const init = () => {
      sitePvApiMethod();
    }
    onMounted(init);

    const count = ref<string[]>([])

    return {
      navs, tools, links , top ,count
    }
  }
})
</script>

<style lang="less">
.base-footer {
  width: 100%;
  min-width: @main-width;
  padding-top: 40px;
  color: fade(@white, 40%);
  background-color: #11223C;

  .base-footer__warp {
    width: @main-width;
    margin: 0 auto;

    h5 {
      color: @white;
    }

    .base-footer__nav {
      padding-bottom: 20px;
      justify-content: space-between;
      border-bottom: 1px solid fade(@white, 12%);

      h5 {
        margin-bottom: 18px;
        line-height: 1;
      }

      ul>li {
        margin-bottom: 17px;
        line-height: 1;
        text-align: left;
      }

      .base-footer__nav-left {
        justify-content: space-between;
        width: 720px;
        padding-right: 64px;
        border-right: 1px solid fade(@white, 12%);
      }

      .base-footer__nav-right {
        width: 500px;
        padding-left: 60px;

        ul>li {
          margin-right: 36px;

          img {
            border-radius: 4px;
          }

          p {
            margin-top: 12px;
            font-size: 12px;
            line-height: 1;
            text-align: center;
          }
        }
      }
    }

    .base-footer__link {
      padding: 16px 0;
      font-size: 14px;
      line-height: 32px;
      border-bottom: 1px solid fade(@white, 12%);

      h5, li {
        margin-right: 40px;
      }
    }

    .base-footer__copyright {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 32px 0 12px;

      p {
        display: flex;
        align-items: center;
        margin-bottom: 22px;
        line-height: 1;

        >span+span {
          margin-left: 20px;
        }
      }
    }
  }
}


.count{
  display: flex;
  justify-content: start;

  li{
    width: 25px;
    height: 32px;
    margin-right: 5px;
    font-size: 16px;
    line-height: 32px !important;
    color: #222;
    text-align: center !important;
    background-color: #999;
    border-radius: 2px;

  }
}

.mt70{
  margin-bottom: 70px;
}

.von{
  .ant-btn:not(.ant-btn-primary){
    display: none;
  }
}
</style>

